<template>
	<view>
		<view class="status_bar"></view>
		<view class="page-title">热门频道</view>
		<view class="pindao-list">
		  <view class="pindao-item-box" v-for="(item,index) in pinDaoList" :key="index">
			<div class="pindao-item" @click="openVideoList(index)">
			  <div class="pinddo-image">
				<image
				  class="image"
				  :src="item.xinimg"
				   style="background: #CECFD0;"
				/>
			  </div>
			  <div class="pindao-text">
				<div class="title">{{item.title}}<span v-if="pindoIndex==index"><img src="~@/static/playing.gif" /></span></div>
				<div class="look"><img src="~@/static/look.png" /> &nbsp;{{item.Number}} </div>
			  </div>
			</div>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				title:"",
				isLogin:false,
				pindoIndex:-1,
				pinDaoList:[]
			}
		},
		onLoad(){
			if(this.appInfo.data.pinDaoList){
				this.pinDaoList = this.appInfo.data.pinDaoList;
			}else{
				this.loadList();
			}
		},
		onShow(){
			this.isLogin = this.appInfo.isLogin();
		},
		onPullDownRefresh(){
			this.loadList();
		},
		methods:{
			loadList:function () {
				var that = this;
				this.retry_times = 0;
				this.request.getApiInfo((response)=>{
					uni.stopPullDownRefresh();
					console.log("加载频道信息");
					if(typeof response.data != 'undefined'){
					  that.pinDaoList = response.data.pingtai;
					  this.appInfo.data.pinDaoList = that.pinDaoList;
					}
				},(error)=>{
					uni.stopPullDownRefresh();
				});
			},
			playVideo:function(index){
				if(!this.videoList[0].address){
					uni.showToast({title:"数据还未加载完成",icon:"none"});
					return;
				}
				if(!this.isLogin){
					uni.showModal({
						title:"登陆提示",
						content:"请先登陆会员后再试！",
						showCancel:false,
						success(){
							uni.navigateTo({
								url:"../login/login"
							});
						}
					});
					return;
				}
				this.appInfo.playInfo = this.videoList[index];
				uni.navigateTo({
					url:"../play/play"
				})
			},
			openVideoList:function (index) {
			  this.appInfo.pindoIndex = this.pindoIndex = index;
			  this.appInfo.pindaoAddress = this.pinDaoList[index].address;
			  this.appInfo.pindaoTitle = this.pinDaoList[index].title;
			  uni.navigateTo({
			  	url:"../pingdao/list"
			  })
			}
		}
	}
</script>

<style>
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.page-title{
		color: #808080;
		padding: 20rpx;
	}
	.pindao-list{
			  display: flex;
			  flex-direction: row;
			  flex-wrap:wrap;
	}
	.pindao-list .pindao-item-box{
			  display: flex;
			  width: 50%;
	}
	.pindao-item{
	  background: white;
	  width: 350rpx;
	  margin: 10rpx auto;
	}
	.pindao-item:after{
	  content: "";
	  display: table;
	  clear: both;
	}
	.pindao-item .pinddo-image{
			  float: left;
			  font-size: 30rpx;
			  margin:20rpx;
	}
	.pindao-item .pindao-text{
	  float: left;
	  font-size: 30rpx;
	  width: 180rpx;
	  overflow: hidden;
	  margin:20rpx;
	}
	.pindao-item .pinddo-image .image{
			  width: 90rpx;
			  height: 90rpx;
			  border-radius: 20rpx;
	}
	.pindao-item .pindao-text .title{
	  font-weight: bold;
			white-space: nowrap;
	  padding-bottom: 10rpx;
	  position: relative;
	}
	.pindao-item .pindao-text .title span{
	  position: absolute;
	  left: 150rpx;
	}
	.pindao-item .pindao-text .title img{
			  width: 40rpx;
			  height: 40rpx;
	}
	.look{
		display: flex;
		align-items: center;
	}
	.look img{
			  width: 38rpx;
			  height: 36rpx;
			  margin-right: 10rpx;
	}
</style>
